<template>
    <base-dialog v-bind="$attrs"
                 v-on="$listeners" @submit="submit" title="选择处理人">
        <span class="approver-name">下一个处理人：{{name}}</span>
        <div class="dialog-content">
            <el-input
                    placeholder="搜索"
                    v-model="filterText" size="small" style="margin:10px 20px 0px; width: 90%">
            </el-input>
            <el-tree :data="list" ref="tree" :props="defaultProps" @node-click="handleNodeClick"  @check-change="handleNodeClick"
                     :showCheckbox="showCheckbox" :check-on-click-node="true" node-key="username" :check-strictly="false"></el-tree>
        </div>
    </base-dialog>
</template>
<script>
    //import schoolSignature from "@/api/officialDocument/schoolSignature/index"
    import eventBus from "@/utils/eventBus";
    import BaseDialog from "../../Common/BaseDialog";
    import workManagement from "@/api/workManagement/index";
    import {mapGetters} from "vuex";
    export default {
        name: "AddApproverList",
        components: {BaseDialog},
        props: ["dataList", "showCheckbox","msg","title"],
        data() {
            return {
                name: "",
                node: {},
                list: [],
                defaultProps: {
                    children: 'list',
                    label: 'alias'
                },
                loading:false,
                filterText:undefined,
                names:[]
            };
        },
        watch: {
            filterText(val) {
                this.getDeptLeaderList(val)
            }
        },
        created() {
            if (this.dataList && this.dataList.length > 0) {
                this.list = this.dataList
            } else {
                this.getDeptLeaderList()
            }
            eventBus.$on("approverLoading", (loading) => {
                this.loading = loading
            });
        },
        computed: {
            ...mapGetters(["ticketId","suggestion"]),
        },
        methods: {
            handleClose(done) {
                this.$emit("update:visible", false)
            },
            handleNodeClick(data) {
                if (this.showCheckbox) {
                    if (this.$refs["tree"]) {
                        let nodes = this.$refs["tree"].getCheckedNodes()
                        nodes = nodes.filter(item=>{
                            return item.id||item.username
                        })
                        let names = nodes.map(item => {
                            return item.alias
                        })
                        this.names = names
                        this.name=names.join(",")
                    }else{
                        this.name=""
                    }
                }else{
                    if (data.username) {
                        this.name = data.alias
                        this.node = data
                    }
                }
            },
            submit() {
                if (this.name) {
                    let keys = this.$refs["tree"].getCheckedKeys()
                    keys = keys.filter(item=>{
                        return item!=null
                    })
                    workManagement.toAddNode(this.ticketId, { target_username: keys.join(","), suggestion: this.suggestion}).then(res => {
                       this.msgSuccess("加签成功")
                        eventBus.$emit("closeDetailDialog")
                    });
                } else {
                    this.msgError("请选择处理人")
                }
            },
            getDeptLeaderList(val) {
                // schoolSignature.getDeptLeaderList({search_value:val}).then(res => {
                //     this.list = []
                //     res.data.map(item => {
                //         this.list = this.list.concat(item.list)
                //     })
                // })
            },
            beforeDestroy() {
                eventBus.$off("approverLoading")
            }
        }
    };
</script>
<style lang="scss" scoped>
    .approver-name {
        font-size: 20px;
        margin-bottom: 10px;
        .target{
            color: #1e82e0;
            border-radius: 3px;
            border: 1px #1e82e0 solid;
            font-size: 14px;
            padding: 5px;
            margin: 5px;
            display: inline-block;
        }
    }

    .dialog-content {
        height: 400px;
        overflow-y: scroll;
    }
    ::v-deep.el-tree{
        .el-tree-node:focus > .el-tree-node__content {
            background: #d8dadb;
        }
        .is-current>.el-tree-node__content{ background: #d8dadb;}
        .is-current>.el-tree-node__content::before{background: #d8dadb;}
    }

</style>
